<template>
  <!-- 报修列表页面 -->
  <view>
    <!-- 报修列表 -->
    <view style="margin-left: 40rpx;
                 margin-right: 40rpx;
                 ">
      <my-repair-item :repair="item" v-for="(item,index) in repairList" :key="index"></my-repair-item>
      <view style="margin-bottom: 150rpx;"></view>
      <view v-if="repairList.length==0" style="margin: 15rpx auto;">
        <image src="/static/noRepair.png"></image>
        <view style="text-align: center;">暂无报修记录~</view>
      </view>
    </view>
    <!-- + -->
    <navigator url="../../subpkg/repair-add/repair-add">
      <image src="https://www.helloimg.com/images/2022/03/27/ReoTkQ.png" style="width: 120rpx;
                     height: 120rpx;
                     position: fixed;
                     bottom: 200rpx;
                     right: 30rpx;
                     z-index: 9999;"></image>
    </navigator>
    <!-- 自定义tabBar -->
    <view>
      <u-tabbar :value="tabBarIndex" :fixed="true" @change="tabBarchange" :placeholder="false" activeColor="#1296db"
        :safeAreaInsetBottom="false">
        <block v-for="(item,index) in tabBarList" :key="index">
          <u-tabbar-item :text="item.text">
            <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
            <image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
          </u-tabbar-item>
        </block>
      </u-tabbar>
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        repairList: [],//报修列表
      };
    },
    computed: {
      // 将 m_user 模块中的 userType userInfo 等数据映射到当前页面中使用
      ...mapState('m_user', ['userType','userInfo']),
      ...mapState('m_tabbar', ['tabBarList', 'tabBarIndex']),
    },
    onLoad() {
      this.getRepairList();
    },
    methods: {
      async getRepairList(cb){
        // ** 打开节流阀
        this.isloading = true
        const {data: res} = await uni.$http.post('/repair/getrepairlist', this.userInfo.id)
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
        if (res.status !== 200) return uni.$showMsg()
        this.repairList=res.data;
      },
      
      // 下拉刷新的事件
      onPullDownRefresh() {
        // 1. 重置关键数据
        this.isloading = false
        this.repairList = [];
        // 2. 重新发起请求   传参（关闭下拉刷新，因为默认不关闭）
        this.getRepairList(() => uni.stopPullDownRefresh())
      },
      // tabbar 相关方法
      ...mapMutations('m_tabbar', ['updateTabBarList', 'updateTabBarIndex']),
      tabBarchange(name) {
        uni.switchTab({
          url: this.tabBarList[name].pagePath
        })
        // this.tabBarIndex = name;
        this.setTabBarIndex(name);
      },
      setTabBarList(list) {
        this.updateTabBarList(list);
      },
      setTabBarIndex(index) {
        this.updateTabBarIndex(index);
      }
    }
  }
</script>

<style lang="scss">
.u-page {
    padding: 0;

    &__item {

      &__title {
        color: $u-tips-color;
        background-color: $u-bg-color;
        padding: 30rpx;
        font-size: 30rpx;

        &__slot-title {
          color: $u-primary;
          font-size: 30rpx;
        }
      }

      &__slot-icon {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
</style>
